<template>
    <div class="song-list-wrapper">
        <el-card>
            <el-form :inline="true" :model="queryParams" class="mb-2">
                <el-form-item label="用户id">
                    <el-input v-model="queryParams.user_id" placeholder="用户id" clearable size="small"
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="歌曲状态">
                    <el-select v-model="queryParams.status" clearable placeholder="全部" size="small"
                        @change="handleQuery">
                        <el-option label="已提交" value="submitted" />
                        <el-option label="处理中" value="streaming" />
                        <el-option label="已完成" value="complete" />
                    </el-select>
                </el-form-item>

                <el-form-item label="模式">
                    <el-select v-model="queryParams.mode" clearable placeholder="全部" size="small" @change="handleQuery">
                        <el-option label="描述" value="description" />
                        <el-option label="歌词" value="custom" />
                    </el-select>
                </el-form-item>

                <el-form-item label="人声性别">
                    <el-select v-model="queryParams.vocal_gender" clearable placeholder="全部" size="small"
                        @change="handleQuery">
                        <el-option label="男声" value="m" />
                        <el-option label="女声" value="f" />
                        <el-option label="纯音乐" value="x" />
                    </el-select>
                </el-form-item>

                <el-form-item label="创建时间">
                    <el-date-picker v-model="value1" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
                        :start-placeholder="'开始日期'" :end-placeholder="'结束日期'" @change="timeChange">
                    </el-date-picker>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" size="small" icon="el-icon-search" @click="handleQuery">查询</el-button>
                    <el-button type="default" size="small" icon="el-icon-refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>

            <el-table :data="songList" border v-loading="loading" style="width: 100%;">
                <el-table-column prop="user_id" label="用户ID" align="center" width="120" />
                <el-table-column prop="mode" label="模式" align="center" width="80">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.mode === 'description'" type="primary">描述</el-tag>
                        <el-tag v-else-if="scope.row.mode === 'custom'" type="success">歌词</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="歌曲标题" align="center" min-width="150" show-overflow-tooltip />

                <el-table-column prop="status" label="状态" align="center" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.status === 'submitted'" type="info">已提交</el-tag>
                        <el-tag v-else-if="scope.row.status === 'streaming'" type="warning">处理中</el-tag>
                        <el-tag v-else-if="scope.row.status === 'complete'" type="success">已完成</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="vocal_gender" label="人声" align="center" width="80">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.vocal_gender === 'm'" type="primary">男声</el-tag>
                        <el-tag v-else-if="scope.row.vocal_gender === 'f'" type="success">女声</el-tag>
                        <el-tag v-else-if="scope.row.is_instrumental" type="info">纯音乐</el-tag>
                        <span v-else>-</span>
                    </template>
                </el-table-column>

                <el-table-column prop="created_at_fmt" label="创作时间" align="center" width="160" />
                <el-table-column prop="completed_at_fmt" label="完成时间" align="center" width="160" />
                <el-table-column prop="duration_fmt" label="生成时间" align="center" width="160" />

                <el-table-column label="操作" align="center" width="200" fixed="right">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="showDetail(scope.row)" type="text">详情</el-button>
                        <el-button v-if="scope.row.audio_url" size="mini" @click="playAudio(scope.row)" type="text"
                            style="color: #67C23A">试听</el-button>
                        <el-button v-if="scope.row.video_url" size="mini" @click="playVideo(scope.row)" type="text"
                            style="color: #E6A23C">观看</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryParams.page" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.size"
                layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </el-card>

        <!-- 歌曲详情弹窗 -->
        <el-dialog :visible.sync="showDialog" width="1200px" title="歌曲详情">
            <el-form label-width="160px" size="small">

                <!-- 基础信息 -->
                <el-divider>基础信息</el-divider>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="歌曲ID">
                            <el-input v-model="currentSong.id" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="任务ID">
                            <el-input v-model="currentSong.task_id" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="用户ID">
                            <el-input v-model="currentSong.user_id" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="歌曲标题">
                            <el-input v-model="currentSong.title" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="状态">
                            <el-input v-model="currentSong.status" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="显示名称">
                            <el-input v-model="currentSong.display_name" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 音频视频链接 -->
                <el-divider>媒体文件</el-divider>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="音频链接">
                            <el-input v-model="currentSong.audio_url" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="封面图片">
                            <el-input v-model="currentSong.image_url" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="大尺寸封面">
                            <el-input v-model="currentSong.image_large_url" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>

                <!-- 创作参数 -->
                <el-divider>创作参数</el-divider>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="风格/流派">
                            <el-input v-model="currentSong.genre" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="情绪">
                            <el-input v-model="currentSong.mood" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="人声性别">
                            <el-input v-model="currentSong.vocal_gender" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="prompt">
                            <el-input type="textarea" :rows="3" v-model="metadata_json.gpt_description_prompt"
                                disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="歌曲描述">
                            <el-input type="textarea" :rows="3" v-model="metadata_json.tags" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <el-col :span="24">
                        <el-form-item label="歌词">
                            <el-input type="textarea" :rows="3" v-model="metadata_json.prompt" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 技术信息 -->
                <el-divider>技术信息</el-divider>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="模型名称">
                            <el-input v-model="currentSong.model_name" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="主要模型版本">
                            <el-input v-model="currentSong.major_model_version" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- 时间信息 -->
                <el-divider>时间信息</el-divider>
                <el-row :gutter="24">
                    <el-col :span="12">
                        <el-form-item label="创建时间">
                            <el-input v-model="currentSong.created_at" disabled />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="更新时间">
                            <el-input v-model="currentSong.updated_at" disabled />
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showDialog = false">关闭</el-button>
            </span>
        </el-dialog>

        <!-- 音频播放弹窗 -->
        <el-dialog title="音频播放" :visible.sync="showAudioDialog" width="600px">
            <div style="text-align: center;">
                <h3>{{ playingSong.title }}</h3>
                <audio v-if="playingSong.audio_url" controls style="width: 100%; margin: 20px 0;">
                    <source :src="playingSong.audio_url" type="audio/mpeg">
                    您的浏览器不支持音频播放。
                </audio>
                <div v-else>
                    <p>暂无音频文件</p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showAudioDialog = false">关闭</el-button>
            </span>
        </el-dialog>

        <!-- 视频播放弹窗 -->
        <el-dialog title="视频播放" :visible.sync="showVideoDialog" width="800px">
            <div style="text-align: center;">
                <h3>{{ playingSong.title }}</h3>
                <video v-if="playingSong.video_url" controls style="width: 100%; max-width: 700px; margin: 20px 0;">
                    <source :src="playingSong.video_url" type="video/mp4">
                    您的浏览器不支持视频播放。
                </video>
                <div v-else>
                    <p>暂无视频文件</p>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="showVideoDialog = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { getSongList } from "@/api/museo"; // 需要创建对应的API接口

export default {
    name: "song-list",
    data() {
        return {
            queryParams: {
                user_id:'',
                status: '',
                is_public: '',
                vocal_gender: '',
                page: 1,
                size: 10,
                dateRange: {
                    start: "",
                    end: "",
                },
            },

            songList: [],
            total: 0,
            loading: false,
            showDialog: false,
            currentSong: {},
            metadata_json: {},
            value1: "",

            // 音视频播放相关
            showAudioDialog: false,
            showVideoDialog: false,
            playingSong: {},
        };
    },
    methods: {
        handleQuery() {
            this.queryParams.page = 1;
            this.getSongs();
        },

        async getSongs() {
            this.loading = true;
            try {
                // 发送 POST 请求，需要在 API 文件中创建对应接口
                let res = await getSongList(this.queryParams);
                console.log(res)
                if (res.code === 0) {
                    this.songList = res.data || [];
                    this.total = res.total || 0;
                } else {
                    this.$message.error(res.msg || "获取歌曲数据失败");
                }
            } catch (e) {
                this.$message.error('获取歌曲数据失败');
            }
            this.loading = false;
        },

        timeChange() {
            this.queryParams.dateRange.start = this.value1[0];
            this.queryParams.dateRange.end = this.value1[1];
            this.getSongs();
        },

        handleCurrentChange(page) {
            this.queryParams.page = page;
            this.getSongs();
        },

        handleSizeChange(size) {
            this.queryParams.size = size;
            this.queryParams.page = 1;
            this.getSongs();
        },

        resetQuery() {
            this.queryParams.user_id = '';
            this.queryParams.mode = '';

            this.queryParams.status = '';
            this.queryParams.is_public = '';
            this.queryParams.vocal_gender = '';
            this.value1 = '';
            this.queryParams.page = 1;
            this.queryParams.dateRange.start = null;
            this.queryParams.dateRange.end = null;
            this.getSongs();
        },

        showDetail(row) {
            this.currentSong = Object.assign({}, row);
            this.metadata_json = Object.assign({}, row.metadata_json);
            this.showDialog = true;
        },

        // 播放音频
        playAudio(row) {
            this.playingSong = Object.assign({}, row);
            this.showAudioDialog = true;
        },

        // 播放视频
        playVideo(row) {
            this.playingSong = Object.assign({}, row);
            this.showVideoDialog = true;
        },
    },

    created() {
        if (this.$route.query.user_id) {
            this.queryParams.user_id = this.$route.query.user_id;
            // 自动查一次
            this.handleQuery();
        } else {
            // 没有参数你自己决定是否默认查全部/弹窗等
            this.handleQuery();
        }
    }
};
</script>

<style scoped>
::v-deep .el-input.is-disabled .el-input__inner {
    color: #333;
}
::v-deep .el-textarea.is-disabled .el-textarea__inner {
    color: #333;
}
.pagination {
    margin-top: 20px;
    text-align: right;
}

.dialog-footer {
    text-align: right;
}

.mb-2 {
    margin-bottom: 16px;
}
</style>